<template>
	<view class="goods-main">
		<view class="wrap">
			<z-paging style="height: 100% !important;" class="wrap" ref="paging" v-model="dataList" @query="GetInOutSpareList">
				<cu-custom bgColor="bg-gradual-blue" :isBack="true">
					<block slot="backText">返回</block>
					<block slot="content">{{inOutTypeName}}</block>
				</cu-custom>
				<view class="search">
					<u-search placeholder="请输入出入库单号搜索" v-model="getData.KeyWords" @custom='search()' @search='search()'></u-search>
				</view>
				<sl-filter :themeColor="themeColor" :menuList="menuList" @result="result" @resetMenuList="resetMenuList"></sl-filter>
				<view v-for="(item, index) in dataList" class="goods-item-wrap">
					<view class="goods-content-wrap">
						<view class="goods-name">
							<view class="goods-name-title">{{item.InOutStorageNumbers}}</view>
							<view class="goods-stock-button">{{item.DirectionType==2?'出库':'入库'}}</view>
						</view>
						<view class="goods-stock-wrap">
							<view class="goods-stock">单据日期</view>
							<view class="goods-stock-middle">{{item.InOutStorageDate}}</view>
						</view>
						<view class="goods-stock-wrap">
							<view class="goods-stock">出入库类型</view>
							<view class="goods-stock-middle">{{item.DirectionType==2?item.OutStorageTypeName:item.InStorageTypeName}}</view>
						</view>
						<view class="goods-stock-wrap">
							<view class="goods-stock">仓库</view>
							<view class="goods-stock-middle">{{item.WarehouseName}}</view>
						</view>
						<view class="goods-stock-wrap">
							<view class="goods-stock">备件信息</view>
							<view class="goods-stock-middle">{{item.SpareNames}}</view>
						</view>
						<view class="goods-stock-wrap-line">
						</view>
						<view @click="goInfo(item.Id)" class="goods-stock-wrap-last">
							<view class="goods-stock-user">{{item.AgentName}}</view>
							<view class=".goods-stock-time">{{item.AddTime}}</view>
							<view class="select-icon"></view>
						</view>
					</view>
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script>
import request from '@/common/request.js';
export default {
	data() {
		return {
			inOutTypeName:'',
			getData:{
				PageIndex:1,
				PageSize:10,
				KeyWords:'',
				DirectionType:1,
				Model:'',
				Supplier:'',
				store:'',
				timeList:'',
			},
			dataList:[],
			themeColor: '#0079FE',
			menuList: [
			// 	{
			// 		'title': '供应商',
			// 		'detailTitle': '供应商可多选',
			// 		'isMutiple': false,
			// 		'key': 'supplierId',
			// 		'detailList': [{
			// 				'title': '不限',
			// 				'value': ''
			// 			}
			// 		]
			
			// 	},
			// 	{
			// 		'title': '型号',
			// 		'detailTitle': '型号可多选',
			// 		'isMutiple': false,
			// 		'key': 'modelId',
			// 		'detailList': [{
			// 				'title': '不限',
			// 				'value': ''
			// 			}
			// 		]
			
			// 	},
				{
					'title': '仓库',
					'detailTitle': '',
					'isMutiple': false,
					'key': 'store',
					'detailList': [{
							'title': '不限',
							'value': ''
						}
					]
			
				},
				{
					'title': '时间',
					'detailTitle': '时间',
					'isMutiple': false,
					'key': 'timeList',
					'detailList': [{
							'title': '近三个月',
							'value': '3m'
						}
					]
				}
			]
		};
	},
	mounted() {
		console.log('mounted')
	},
	computed: {
	},
	onLoad(options) {
		let that=this
	    let inOutType=options.inOutType
		if(inOutType=='out'){
			that.inOutTypeName='出库历史'
			that.getData.DirectionType=2
		}else if(inOutType=='in'){
			that.inOutTypeName='入库历史'
			that.getData.DirectionType=1
		}
		that.GetInOutSpareList(1,10);
		that.getSearchOptions()
	},
	methods: {
		goInfo(Id){
			uni.navigateTo({
				url: '/pages-device/spare/spareInOutInfo?Id='+Id
			})
		},
		// 搜索框
		search(e){
			let that=this
			that.dataList=[]
			that.getData.PageIndex=1;
			that.getData.PageSize=10;
			that.getData.KeyWords=e
			this.GetInOutSpareList(1,10);
		},
		result(val) {
			let that=this
			console.log(val)
			//let supplierId=val.supplierId
			//let modelId=val.modelId
			let store=val.store
			let timeList=val.timeList
			//that.getData.Model=modelId
			//that.getData.Supplier=supplierId
			that.getData.store=store
			// Model:'', //型号  多选
			// Supplier:'', //供应商   多选
			// store:'', //仓库  单选
			// timeList:''  //时间 单选
			if(timeList!=''){
				that.getData.timeList=timeList
			}else{
				that.getData.timeList='3m'
			}
			
			that.dataList=[]
			that.GetInOutSpareList(1,10)
		},
		getSearchOptions(){
			let that=this
			let opts = {
				url: 'spareapi/GetSpareSearchOptionsV2',
				method: 'get'
			};
			request.httpTokenRequest(opts).then(res => {
				if(res.data.code == 1){
					console.log(res.data.data)
					//let supplierId =res.data.data.supplier  //供应商
					//let modelId = res.data.data.spareModel   //型号
					let store = res.data.data.Warehouse   //仓库
					//let fsclass = res.data.data.Spare_TypeList   //备件类型
					let timeList = res.data.data.timeList   //时间
					
					//类别
					// if(supplierId.length>0){
					// 	let datalist=[]
					// 	let entity={
					// 		title:'不限',
					// 		value:''
					// 	}
					// 	datalist.push(entity)
					// 	for(let i=0;i<supplierId.length;i++){
					// 		let entity={
					// 			title:supplierId[i].Name,
					// 			value:supplierId[i].Id
					// 		}
					// 		datalist.push(entity)
					// 	}
					// 	that.menuList[0].detailList=datalist
					// }
					//型号
					// if(modelId.length>0){
					// 	let datalist=[]
					// 	let entity={
					// 		title:'不限',
					// 		value:''
					// 	}
					// 	datalist.push(entity)
					// 	for(let i=0;i<modelId.length;i++){
					// 		let entity={
					// 			title:modelId[i],
					// 			value:modelId[i]
					// 		}
					// 		datalist.push(entity)
					// 	}
					// 	that.menuList[1].detailList=datalist
					// }
					//仓库
					if(store.length>0){
						let datalist=[]
						let entity={
							title:'不限',
							value:''
						}
						datalist.push(entity)
						for(let i=0;i<store.length;i++){
							let entity={
								title:store[i].Name,
								value:store[i].Id
							}
							datalist.push(entity)
						}
						that.menuList[0].detailList=datalist
					}
					//备件类型
					// if(fsclass.length>0){
					// 	let datalist=[]
					// 	let entity={
					// 		title:'不限',
					// 		value:''
					// 	}
					// 	datalist.push(entity)
					// 	for(let i=0;i<fsclass.length;i++){
					// 		let entity={
					// 			title:fsclass[i].SpareTypeName,
					// 			value:fsclass[i].Id
					// 		}
					// 		datalist.push(entity)
					// 	}
					// 	that.menuList[3].detailList=datalist
					// }
					//时间
					if(timeList.length>0){
						let datalist=[]
						for(let i=0;i<timeList.length;i++){
							let entity={
								title:timeList[i].Name,
								value:timeList[i].Time
							}
							datalist.push(entity)
						}
						that.menuList[1].detailList=datalist
					}
				}
				else{
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			});
		},
		GetInOutSpareList(pageNo, pageSize){
			let that=this
			uni.showLoading({
				title: '加载中...'
			})
			let opts = {
				url: 'SpareApi/GetInOutSpareList',
				method: 'get'
			};
			that.getData.PageIndex=pageNo;
			that.getData.PageSize=pageSize;
			request.httpTokenRequest(opts,that.getData).then(res => {
				uni.hideLoading();
				if(res.data.code == 1){
					this.$refs.paging.complete(res.data.data);
				}
				else{
					uni.showToast({ title: res.data.msg, icon: 'none' });
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped>
	.search{
		width: 100%;
		height: 100rpx;
		padding: 20rpx 2% 0 2%;
		background-color: #fff;
		margin-top: --window-top;
		// display: flex;1
		// align-items: center;
	}
	
	.goods-main {
		min-height: 100vh;
		background: #f7f8fa;
		padding-top: 0rpx;
		padding-bottom: 240rpx;
	}
	.cu-tag.badge{
		top:-10rpx !important;
		right:30rpx !important;
	}
	.goods-item-wrap-now{
		//border:2px solid #00B52A;
	}
	.goods-item-wrap {
		border-radius: 8rpx;
		background: #FFFFFF;
		display: flex;
		padding: 24rpx;
		margin: 12rpx;
		height:440rpx;
		//width:100%;
		.goods-content-wrap{
			width: 100%;
		}
		.goods-name {
			width: 100%;
			font-size: 32rpx;
			font-weight: bold;
			display: flex;
			position: relative;
			border-bottom: 1px solid #F3F4F8;
			//padding-bottom: 20rpx;
			height: 60rpx;
		}
		.goods-name-title{
			display: block;
			float: left;
		}
		.goods-name-type{
			display: block;
			float:right;
			color: #3B69FD;
			margin-right: 20rpx;
		}
		.goods-stock-wrap {
			display: flex;
			color: #969696;
			font-size: 28rpx;
			margin-top: 30rpx;
			justify-content:left;
		}
		.goods-stock-middle{
			font-size: 28rpx;
			color: #595f6e;
			line-height: 32rpx;
			font-weight: 400;
		}
		.goods-stock-wrap-line{
			width:100%;
			height:30rpx;
			border-bottom: 2px dotted #F3F4F8;
		}
		.goods-stock-wrap-last{
			height: 80rpx;
			font-size: 28rpx;
			color: #989898;
			line-height: 80rpx;
			font-weight: 400;
			position: relative;
			.goods-stock-user{
				line-height:80rpx;
				width: 160rpx;
				float: left;
				//margin-right: 40rpx;
			}
			.goods-stock-time{
				line-height:80rpx;
				width: auto;
				float: left;
				width: 280rpx;
			}
			.select-icon{
				border-bottom: 3rpx solid #999;
				border-right: 3rpx solid #999;
				width: 16rpx;
				height: 16rpx;
				transform: rotate(-45deg);
				position: absolute;
				right: 20rpx;
				top: 32rpx;
			}
		}
		
		.goods-stock {
			margin-right: 24rpx;
			font-size: 28rpx;
			color: #9C9C9C;
			line-height: 32rpx;
			width:200rpx;
		}
		.goods-price1 {
			font-size:26rpx;
			color: #3B69FD;
			margin-top: 20rpx;
			font-weight:500;
			width: 160rpx;
			display: block;
			float:left;
			background-color: #D0D9F7;
			border-radius: 4rpx;
			text-align: center;
			height: 54rpx;
			line-height: 54rpx;
		}
		.goods-price2 {
			font-size:26rpx;
			color: #15C9CA;
			margin-top: 20rpx;
			font-weight:500;
			width: 160rpx;
			display: block;
			float:left;
			background-color: #C8ECEC;
			border-radius: 4rpx;
			text-align: center;
			height: 54rpx;
			line-height: 54rpx;
		}
		.goods-option-item {
			padding: 8rpx 16rpx;
			border-radius: 36rpx;
			font-size: 24rpx;
			margin-top: 24rpx;
		}
	}
	
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
}

	.goods-option-item {
		padding: 8rpx 16rpx;
		border-radius: 36rpx;
		font-size: 24rpx;
		margin-top: 24rpx;
	}

	.goods-option-item:not(:last-child) {
		margin-right: 24rpx;
	}

	.goods-option-item-action {
		background: #f1f0fe;
		color: #6991ce;
	}

	.goods-item-wrap {
		margin-top: 24rpx;
	}

	.goods-header-wrap {
		display: flex;
		align-items: center;
		padding: 24rpx;
		background: #FFFFFF;
		margin-bottom: 10rpx;
	}
	.goods-header-item{
		width:49%;
		text-align: center;
	}
	.goods-header-item-active{
		font-size: 30rpx;
		font-color: #333333;
		font-weight: bold;
		position: relative;
	}
	.goods-header-item-active::after{
		position: absolute;
		left: 50%;
		right: 0;
		background: #4372fe;
		height: 8rpx;
		content: "";
		bottom: -12rpx;
		width: 60rpx;
		margin-left: -30rpx;
		border-radius: 200rpx;
	}
	.goods-header-item-action {
		// font-size: 32rpx;
		// font-color: #333333;
		// font-weight: bold;
		position: relative;
	}

	.goods-header-item-action::after {
		// position: absolute;
		// left: 0;
		// right: 0;
		// background: #4372fe;
		// height: 8rpx;
		// content: "";
		// bottom: -12rpx;
	}
	.extraPosition{
		position: absolute;
		right: -5rpx;
		top: -10rpx;
		font-size: 20rpx;
		padding: 0rpx 10rpx;
		height: 28rpx;
		color: #ffffff;
		background-color: #dd514c;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	
	.publish-goods-btn {
		width:160rpx;
		background: #e7612e;
		color: #FFFFFF;
		height: 54rpx;
		line-height: 54rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 82rpx;
		float:right;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}
	
	.publish-goods-btn1 {
		width:160rpx;
		background: #3B69FD;;
		color: #FFFFFF;
		height: 54rpx;
		line-height: 54rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 82rpx;
		float:right;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}
	
	.publish-goods-btn2 {
		width:160rpx;
		background: #00B52A;;
		color: #FFFFFF;
		height: 54rpx;
		line-height: 54rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 82rpx;
		float:right;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}
	
	
	.goods-stock-button{
		width:140rpx;
		background-color: #D0D9F7;
		color: #3B69FD;
		height: 54rpx;
		line-height: 54rpx;
		position: absolute;
		border-radius: 82rpx;
		//float:right;
		right: 0rpx;
		bottom: 14rpx;
		text-align: center;
		font-size: 26rpx;
	}
</style>

